<template>
  <div class="warp-box" id="upadd">
    <el-row class="search-box">
      <el-col :span="24" class="add-bottom">
        <span class="personal-title" v-text="parames.id?'编辑模块':'新建模块'"></span>
      </el-col>
    </el-row>
    <div class="main-box">
      <div class="inforlist">
        <div class="inforadd" style="margin-top: 30px;width: 880px">
          <el-form
            :model="parames"
            :rules="rules"
            ref="parames"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="名称:" prop="name">
              <el-input style="width:400px;" v-model="parames.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="类别:">
              <el-radio-group v-model="parames.type">
                <el-radio label="0" :disabled="parames.id?true:false">资源</el-radio>
                <el-radio label="1" :disabled="parames.id?true:false">链接</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="类型:">
              <el-radio-group v-model="parames.category">
                <el-radio label="0">普通</el-radio>
                <el-radio label="1">导航</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
              <el-popover
                placement="right"
                title
                offset="300"
                width="200"
                trigger="manual"
                v-model="statusBtn"
                content="温馨提示：选择下线后应用就不会显示在前端界面上！"
              ></el-popover>
              <el-switch
                v-model="parames.status"
                active-value="1"
                inactive-value="0"
                active-text="上线"
                inactive-text="下线"
                @change="changeStatus"
              ></el-switch>
            </el-form-item>
            <el-form-item label="绑定数据:" prop="bindProduct">
              <el-switch
                style="margin-left:-20px;"
                v-model="parames.bindProduct"
                active-value="true"
                inactive-value="false"
                active-text="是"
                inactive-text="否"
              ></el-switch>
            </el-form-item>
            <el-form-item label="线上资源:">
              <el-input
                style="width:400px;float:left"
                v-model="parames.onlineUrl"
                placeholder="请输入线上资源或URl..."
              ></el-input>
              <el-button
                v-show="parames.type == 0"
                style="margin-left:15px"
                type="primary"
                round
                @click="handleOpen('onlineUrl', '1')"
              >搜索</el-button>
            </el-form-item>
            <el-form-item label="审核资源:">
              <el-input
                style="width:400px;float:left"
                v-model="parames.auditUrl"
                placeholder="请输入审核资源或URl..."
              ></el-input>
              <el-button
                v-show="parames.type == 0"
                style="margin-left:15px"
                type="primary"
                round
                @click="handleOpen('auditUrl', '2')"
              >搜索</el-button>
            </el-form-item>
            <el-form-item label="开发资源:">
              <el-input
                style="width:400px;float:left"
                v-model="parames.developUrl"
                placeholder="请输入开发资源或URl..."
              ></el-input>
              <el-button
                v-show="parames.type == 0"
                style="margin-left:15px"
                type="primary"
                round
                @click="handleOpen('developUrl', '0')"
              >搜索</el-button>
            </el-form-item>
            <el-form-item label="描述:" prop="memo">
              <el-input
                rows="6"
                style="width:400px;"
                type="textarea"
                v-model="parames.memo"
                placeholder="请输入描述"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button round type="primary" @click="handleSend">保存并返回列表</el-button>
              <el-button round @click="resetData">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <moduleDialog v-bind:moduleDialog="moduleDialog" @getChild="getChild"></moduleDialog>
  </div>
</template>
<script>
import moduleDialog from './module_dialog'
export default {
  data() {
    return {
      parames: {
        id: "",
        name: "",
        onlineUrl: "",
        auditUrl: "",
        developUrl: "",
        status: "0",
        type: "0",
        category: "0",
        bindProduct: "true",
        memo: ""
      },
      statusBtn: false,
      moduleDialog:{
        type: '',
        title: '',
        show: false
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }]
      }
    };
  },
  methods: {
    changeStatus(val) {
      if (val == 0) {
        this.statusBtn = true;
        setTimeout(() => {
          this.statusBtn = false;
        }, 1000);
      }
    },
    handleOpen(key, status) {
      this.moduleDialog.status = status
      this.moduleDialog.type = key
      this.moduleDialog.title = '选择资源'
      this.moduleDialog.show = true
    },
    getChild(url,type) {
      if(type === 'onlineUrl') {
        this.parames.onlineUrl = url
      } else if (type === 'auditUrl') {
        this.parames.auditUrl = url
      } else if (type === 'developUrl') {
        this.parames.developUrl = url
      }
    },
    handleSend() {
      let url = "";
      if (this.parames.id) {
        url = "tx/module/edit";
      } else {
        url = "tx/module/save";
      }
      this.$refs.parames.validate(valid => {
        if (valid) {
          this.$axios
            .post(url, {
              id: this.parames.id,
              name: this.parames.name,
              onlineUrl: this.parames.onlineUrl,
              auditUrl: this.parames.auditUrl,
              developUrl: this.parames.developUrl,
              status: this.parames.status,
              type: this.parames.type,
              category: this.parames.category,
              bindProduct: this.parames.bindProduct,
              memo: this.parames.memo
            })
            .then(res => {
              if (res.code === 10200) {
                this.resetData();
                this.$router.push({ name: "module_list" });
              }
            });
        } else {
          return false;
        }
      });
    },
    render(id) {
      this.$axios.get("tx/module/edit/" + id).then(res => {
        if (res.code === 10200) {
          if (id === "0") {
            // this.parames.modules = res.data.modules;
          } else {
            this.parames = res.data;
            this.parames.status = res.data.status + "";
            this.parames.type = res.data.type + "";
            this.parames.category = res.data.category + "";
            this.parames.bindProduct = res.data.bindProduct + "";
          }
        }
      });
    },
    resetData() {
      this.parames.name = "";
      this.parames.onlineUrl = "";
      this.parames.auditUrl = "";
      this.parames.developUrl = "";
      this.parames.status = "0";
      this.parames.type = "0";
      this.parames.category = "0";
      this.parames.bindProduct = "true";
      this.parames.memo = "";
    }
  },
  mounted() {
    this.parames.id = this.$route.query.id;
    if (this.parames.id) {
      this.render(this.parames.id);
    } else {
      this.render("0");
    }
  },
  components: {
    moduleDialog
  }
};
</script>
<style>
.el-checkbox + .el-checkbox {
  margin: 0;
  padding-right: 30px;
}
</style>
